<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 App 原型 - 界面总览</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <style>
    body {
      background-color: #f5f5f7;
      padding: 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }
    
    .gallery-container {
      max-width: 1600px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .gallery-title {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .gallery-title h1 {
      margin-bottom: 10px;
      color: #333;
    }
    
    .screens-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
      justify-content: center;
    }
    
    .screen-preview {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .screen-preview h3 {
      margin: 0 0 10px 0;
      font-size: 16px;
      color: #333;
      text-align: center;
    }
    
    /* iPhone 14 Pro Max Frame Styles */
    .iphone-frame {
      position: relative;
      width: 280px;
      height: 580px;
      background-color: #1a1a1a;
      border-radius: 40px;
      padding: 10px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }
    
    .iphone-frame::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150px;
      height: 30px;
      background-color: #1a1a1a;
      border-radius: 0 0 16px 16px;
      z-index: 10;
    }
    
    .iphone-notch {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 25px;
      background-color: #1a1a1a;
      border-radius: 16px;
      z-index: 11;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .iphone-camera {
      width: 10px;
      height: 10px;
      background-color: #2b2b2b;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .iphone-speaker {
      width: 40px;
      height: 4px;
      background-color: #2b2b2b;
      border-radius: 2px;
    }
    
    .iphone-screen {
      width: 100%;
      height: 100%;
      border-radius: 30px;
      overflow: hidden;
      background-color: white;
    }
    
    .iphone-screen iframe {
      width: 100%;
      height: 100%;
      border: none;
      transform: scale(0.91);
      transform-origin: 0 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="gallery-container">
    <div class="gallery-title">
      <h1>原子习惯 App 原型</h1>
      <p>基于《掌控习惯》原理设计的习惯养成应用</p>
    </div>
    
    <div class="screens-grid">
      <div class="screen-preview">
        <h3>登录与注册</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="login.html" title="登录与注册界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>首页 / 仪表盘</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="dashboard.html" title="首页/仪表盘界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>习惯详情</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="habit-detail.html" title="习惯详情界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>添加新习惯</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="add-habit.html" title="添加新习惯界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>编辑习惯</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="edit-habit.html" title="编辑习惯界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>数据统计分析</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="analytics.html" title="数据统计分析界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>提醒设置</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="reminder.html" title="提醒设置界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>社区 / 分享</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="community.html" title="社区分享界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>个人资料</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="profile.html" title="个人资料界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>习惯模板库</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="templates.html" title="习惯模板库界面"></iframe>
          </div>
        </div>
      </div>
      
      <div class="screen-preview">
        <h3>设置</h3>
        <div class="iphone-frame">
          <div class="iphone-notch">
            <div class="iphone-camera"></div>
            <div class="iphone-speaker"></div>
          </div>
          <div class="iphone-screen">
            <iframe src="settings.html" title="设置界面"></iframe>
          </div>
        </div>
      </div>
    </div>
    
    <div class="mt-20 text-center">
      <p>本原型基于《掌控习惯》(Atomic Habits) 的核心原则设计，包含了习惯形成的四法则：</p>
      <p><strong>1. 让它显而易见 - 2. 让它有吸引力 - 3. 让它容易做到 - 4. 让它令人满足</strong></p>
    </div>
  </div>
</body>
</html>
